﻿
@{
    Layout = null;
    ViewBag.Title = "UpLogo";
}
<!DOCTYPE>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/cropper.min.css">
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css">
    <script type="text/javascript" src="/Scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/lrz.mobile.min.js"></script>
    <script type="text/javascript" src="/dist/lrz.all.bundle.js"></script>
    <script type="text/javascript" src="/Scripts/cropper.min.js"></script>
    <script type="text/javascript">
        $(function () {

            function toFixed2(num) {
                return parseFloat(+num.toFixed(2));
            }

            $('#cancleBtn').on('click', function () {
                $("#showEdit").fadeOut();
                $('#showResult').fadeIn();
            });

            $('#confirmBtn').on('click', function () {
                $("#showEdit").fadeOut();

                var $image = $('#report > img');
                var dataURL = $image.cropper("getCroppedCanvas");
                var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
                $("#changeAvatar > img").attr("src", imgurl);
                $("#basetxt").val(imgurl);
                $('#showResult').fadeIn();

                $.ajax({
                    url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/User/UpFile",
                    contentType: "application/json",
                    type: "POST",
                    async: true,
                    data: JSON.stringify({ imgurl: imgurl, Extension: ".jpg", Description: "个人头像", Size: imgurl.length }),
                    dataType: "json",
                    success: function (data, status) {
                        var dd = eval(data);
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    }
                });

            });

            function cutImg() {
                $('#showResult').fadeOut();
                $("#showEdit").fadeIn();
                var $image = $('#report > img');
                $image.cropper({
                    aspectRatio: 1 / 1,
                    autoCropArea: 0.7,
                    strict: true,
                    guides: false,
                    center: true,
                    highlight: false,
                    dragCrop: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    zoom: -0.2,
                    checkImageOrigin: true,
                    background: false,
                    minContainerHeight: 400,
                    minContainerWidth: 300
                });
            }

            function doFinish(startTimestamp, sSize, rst) {
                var finishTimestamp = (new Date()).valueOf();
                var elapsedTime = (finishTimestamp - startTimestamp);
                //$('#elapsedTime').text('压缩耗时： ' + elapsedTime + 'ms');

                var sourceSize = toFixed2(sSize / 1024),
                    resultSize = toFixed2(rst.base64Len / 1024),
                    scale = parseInt(100 - (resultSize / sourceSize * 100));
                $("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
                cutImg();
            }

            $('#image').on('change', function () {
                var startTimestamp = (new Date()).valueOf();
                var that = this;
                lrz(this.files[0], {
                    width: 800,
                    height: 800,
                    quality: 0.7
                })
                    .then(function (rst) {
                        //console.log(rst);
                        doFinish(startTimestamp, that.files[0].size, rst);
                        return rst;
                    })
                    .then(function (rst) {
                        // 这里该上传给后端啦
                        // 伪代码：ajax(rst.base64)..



                        return rst;
                    })
                    .then(function (rst) {
                        // 如果您需要，一直then下去都行
                        // 因为是Promise对象，可以很方便组织代码 \(^o^)/~
                    })
                    .catch(function (err) {
                        // 万一出错了，这里可以捕捉到错误信息
                        // 而且以上的then都不会执行

                        alert(err);
                    })
                    .always(function () {
                        // 不管是成功失败，这里都会执行
                    });
            });

        });
    </script>
</head>

<body>
    <div id="showResult">
        <div style="width: 50%;margin: 0 auto;margin-top: 10px;">
            <input id="image" type="file" accept="image/*" capture="camera" />
        </div>

        <div id="changeAvatar" style="margin-top: 35px;">
            <img src="/image/default.jpg" style="width: 100px;margin-top: 10px;margin: 0 auto;display:block;">
        </div>
    </div>
    <div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 9;">
        <div style="width:100%;position: absolute;top:10px;left:0px;">
            <button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
            <button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float:right;margin-right: 10px;">确定</button>
        </div>
        <div id="report">
            <img src="image/mei.jpg" style="width: 300px;height:300px">
        </div>

    </div>
    <div style="width:98%; margin:50px auto;">

        <textarea name="txt" rows="10" id="basetxt" style="width:100%; border-radius:5px" onclick="this.checked = true" placeholder="base64码"></textarea>

    </div>

</body>

</html>
